<template>
  <!-- 表单组件 支持插槽 -->
  <!-- 插槽父组件值flag为true 不是传false或者不传 -->
  <div>
    <div v-if="true"></div>
    <van-form @submit="onSubmit" v-model="data">
      <!-- 表单输入框 -->
      <div v-for="(item, index) in list" :key="'a'+index">
        <van-field
          v-model="item.value"
          :name="item.name"
          :type="item.type"
          :required="!!item.rules||false"
          :disabled="item.disabled || false"
          :label="item.label"
          :placeholder="item.password"
          :rules="item.rules"
          v-if="!item.flag || false"
        >
        </van-field>
      </div>
      <!-- 表单开关 -->
      <div v-for="(item, index) in list" :key="'b'+index" >
        <van-field
          v-if="item.type == 'switch'"
          :name="item.name"
          :label="item.label"
        >
          <template #input>
            <van-switch v-model="item.value" size="20" />
          </template>
        </van-field>
      </div>
      <!-- 表单复选框 -->
      <div v-for="(item, index) in list" :key="'c'+index" >
        <van-field
          v-if="item.type == 'checkbox'"
          :name="item.name"
          :label="item.label"
          :rules="item.rules"
        >
          <template #input>
            <van-checkbox-group v-model="checkboxGroup" direction="horizontal">
              <van-checkbox
                v-for="i in item.checkList"
                :name="i.name"
                :key="i.name"
                shape="square"
              >
                {{ i.valueName }}
              </van-checkbox>
            </van-checkbox-group>
          </template>
        </van-field>
      </div>
      <!-- 表单单选框 -->
      <div v-for="(item, index) in list" :key="'d'+index" >
        <van-field
          :name="item.name"
          :label="item.label"
          v-if="item.type == 'radio'"
          :rules="item.rules"
        >
          <template #input>
            <van-radio-group v-model="radio" direction="horizontal">
              <van-radio v-for="(i, index) in item.checkList" :name="i.name" :key="'e'+index" >{{
                i.valueName
              }}</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </div>
      <!-- 弹出框选择器 -->
      <div v-for="(item, index) in list" :key="'f'+index" >
        <van-field
          v-if="item.type == 'picker'"
          readonly
          clickable
          :name="item.name"
          :value="value"
          :label="item.label"
          :rules="item.rules"
          :placeholder="item.placeholder||'点击选择城市'"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom" >
          <van-picker
            show-toolbar
            :columns="item.pickerList"
            @confirm="onConfirm"
            @cancel="show"
          />
        </van-popup>
      </div>

      <!-- 表单提交 -->
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      switchChecked: false,
      data: [],
      checkbox: false,
      checkboxGroup: [],
      radio: "",
      value: "",
      showPicker: false,
    };
  },
  props: ["list"],//父组件传入参数
  mounted() {},
  methods: {
    onConfirm(value) {
      this.value = value.value;
      this.showPicker = false;
    },
    show(){
        this.showPicker = false
    },
    onSubmit(value) {
      this.$emit("Submit", value);
    },
  },
};
</script>

<style>
</style>